<template>
  <teleport to="body">
    <div 
      v-if="visible"
      :class="[
        'bx-modal-overlay',
        { 'bx-modal-overlay--active': visible }
      ]"
      @click="handleOverlayClick"
    >
      <div 
        :class="[
          'bx-modal',
          'bx-glass',
          `bx-modal--${size}`
        ]"
        :style="modalStyle"
        @click.stop
      >
        <!-- 模态框头部 -->
        <div v-if="$slots.header || title || closable" class="bx-modal__header">
          <slot name="header">
            <h2 v-if="title" class="bx-modal__title bx-text-primary">{{ title }}</h2>
          </slot>
          
          <button 
            v-if="closable"
            class="bx-modal__close bx-glass"
            @click="handleClose"
          >
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"/>
              <line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          </button>
        </div>

        <!-- 模态框内容 -->
        <div v-if="$slots.default" class="bx-modal__content">
          <slot></slot>
        </div>

        <!-- 模态框底部 -->
        <div v-if="$slots.footer" class="bx-modal__footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script>
import { computed, watch, nextTick } from 'vue'

export default {
  name: 'BxModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large', 'fullscreen'].includes(value)
    },
    width: {
      type: [String, Number],
      default: null
    },
    height: {
      type: [String, Number],
      default: null
    },
    closable: {
      type: Boolean,
      default: true
    },
    maskClosable: {
      type: Boolean,
      default: true
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:visible', 'close', 'open'],
  setup(props, { emit }) {
    const modalStyle = computed(() => {
      const style = {}
      
      if (props.width) {
        style.width = typeof props.width === 'number' ? `${props.width}px` : props.width
      }
      
      if (props.height) {
        style.height = typeof props.height === 'number' ? `${props.height}px` : props.height
      }

      return style
    })

    const handleClose = () => {
      emit('update:visible', false)
      emit('close')
    }

    const handleOverlayClick = () => {
      if (props.maskClosable) {
        handleClose()
      }
    }

    // 监听 visible 变化
    watch(() => props.visible, (newVal) => {
      if (newVal) {
        document.body.style.overflow = 'hidden'
        emit('open')
      } else {
        document.body.style.overflow = 'auto'
      }
    })

    // ESC 键关闭
    const handleKeydown = (event) => {
      if (event.key === 'Escape' && props.visible && props.closable) {
        handleClose()
      }
    }

    // 组件挂载时添加键盘事件监听
    nextTick(() => {
      document.addEventListener('keydown', handleKeydown)
    })

    return {
      modalStyle,
      handleClose,
      handleOverlayClick
    }
  },
  beforeUnmount() {
    document.removeEventListener('keydown', this.handleKeydown)
    document.body.style.overflow = 'auto'
  }
}
</script>

<style scoped>
.bx-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--bx-transition-slow);
}

.bx-modal-overlay--active {
  opacity: 1;
  visibility: visible;
}

.bx-modal {
  position: relative;
  background: var(--bx-glass-bg);
  backdrop-filter: var(--bx-glass-blur-strong) var(--bx-glass-saturate);
  -webkit-backdrop-filter: var(--bx-glass-blur-strong) var(--bx-glass-saturate);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--bx-radius-xl);
  padding: var(--bx-spacing-xl);
  box-shadow: 
    0 32px 80px rgba(0, 0, 0, 0.25),
    0 12px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  max-height: 80vh;
  overflow: hidden;
  transform: scale(0.85) translateY(40px);
  transition: all var(--bx-transition-slow);
  font-family: var(--bx-font-family);
}

.bx-modal-overlay--active .bx-modal {
  transform: scale(1) translateY(0);
}

.bx-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.1) 25%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    rgba(255, 255, 255, 0.15) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.7;
}

.bx-modal::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.12)
  );
  border-radius: calc(var(--bx-radius-xl) + 3px);
  z-index: -1;
  opacity: 0.6;
}

/* 模态框尺寸 */
.bx-modal--small {
  width: 400px;
  max-width: 90vw;
}

.bx-modal--medium {
  width: 520px;
  max-width: 90vw;
}

.bx-modal--large {
  width: 800px;
  max-width: 95vw;
}

.bx-modal--fullscreen {
  width: 95vw;
  height: 95vh;
  max-height: 95vh;
}

/* 模态框头部 */
.bx-modal__header {
  position: relative;
  z-index: 2;
  margin-bottom: var(--bx-spacing-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bx-modal__title {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  letter-spacing: -0.03em;
}

.bx-modal__close {
  width: 36px;
  height: 36px;
  background: var(--bx-glass-bg);
  backdrop-filter: var(--bx-glass-blur);
  border: 1px solid var(--bx-glass-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--bx-transition-medium);
  position: relative;
  overflow: hidden;
}

.bx-modal__close::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--bx-transition-medium);
}

.bx-modal__close:hover {
  background: var(--bx-glass-bg-hover);
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.bx-modal__close:hover::before {
  opacity: 1;
}

.bx-modal__close svg {
  width: 18px;
  height: 18px;
  color: var(--bx-text-primary);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* 模态框内容 */
.bx-modal__content {
  position: relative;
  z-index: 2;
  margin-bottom: var(--bx-spacing-xl);
  max-height: 60vh;
  overflow-y: auto;
  color: var(--bx-text-secondary);
  line-height: 1.6;
}

/* 模态框底部 */
.bx-modal__footer {
  position: relative;
  z-index: 2;
  display: flex;
  gap: var(--bx-spacing-md);
  justify-content: flex-end;
}

/* 脉冲动画 */
@keyframes bx-modal-pulse {
  0%, 100% { 
    box-shadow: 
      0 32px 80px rgba(0, 0, 0, 0.25),
      0 12px 32px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  }
  50% { 
    box-shadow: 
      0 36px 88px rgba(0, 0, 0, 0.28),
      0 16px 40px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1px 0 rgba(255, 255, 255, 0.1);
  }
}

.bx-modal {
  animation: bx-modal-pulse 8s ease-in-out infinite;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bx-modal {
    padding: var(--bx-spacing-lg);
    margin: 20px;
    width: calc(100% - 40px) !important;
    border-radius: var(--bx-radius-large);
  }
  
  .bx-modal__title {
    font-size: 22px;
  }
  
  .bx-modal__footer {
    flex-direction: column;
    gap: 12px;
  }
  
  .bx-modal__close {
    width: 32px;
    height: 32px;
  }
  
  .bx-modal__close svg {
    width: 16px;
    height: 16px;
  }
}
</style>

